<template>
	<div class="common-table">
		<el-table :data="tableData" height="" stripe>
			<el-table-column show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label" :min-width="item.width" >
				<template slot-scope="scope">
					<span style="margin-left: 10px;">{{ scope.row[item.prop] }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="20%">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="pager" layout="total, prev, pager, next, jumper" 
		:total="config.total" :page-sizes="[10,20,100]" :current-page.sync="config.page" 
		@current-change="changePage" :page-size="config.size"></el-pagination>
	
	</div>
</template>

<script>
export default {
	name: 'CommonTable',
	props: {
		tableData: Array,
		tableLabel: Array,
		config: Object
	},
	data() {
		return {
			disable:true, 
		}
	},
	created() {
		// alert(JSON.stringify(this.config))
	},
	methods: {
		handleEdit(row){
			this.$emit('edit',row)  //￥emit向父组件传递事件
		},
		handleDelete(row){
			this.$emit('del',row)
		},
		changePage(page){
			this.$emit('changePage',page)
		}
	}
}
</script>

<style>
.common-table{
/* 	// height:300px;
	// overflow-y:auto;
	// height: calc(100% - 62px);
	// background-color: red;
	// position: relative; */
	.pager{
/* 		// position: absolute;
		// bottom: 0;
		// right: 20px; */
		margin-top: 10px;
		text-align: center;
	}
}
</style>
